<template>
  <div class="listsBox">
    <div class="topCard">
      <div class="left-img">
        <img :src="topcard.coverImgUrl" />
      </div>
      <div class="right-box">
        <span class="tag">精品歌单</span>
        <div class="toptitle">{{topcard.copywriter}}</div>
        <div class="text">{{topcard.description}}</div>
      </div>
      <img class="bg"
        :src="topcard.coverImgUrl" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item"
          :class="{active:tag=='全部'}"
          @click="tag='全部'">全部</span>
        <span class="item"
          :class="{active:tag=='欧美'}"
          @click="tag='欧美'">欧美</span>
        <span class="item"
          :class="{active:tag=='华语'}"
          @click="tag='华语'">华语</span>
        <span class="item"
          :class="{active:tag=='流行'}"
          @click="tag='流行'">流行</span>
        <span class="item"
          :class="{active:tag=='说唱'}"
          @click="tag='说唱'">说唱</span>
        <span class="item"
          :class="{active:tag=='摇滚'}"
          @click="tag='摇滚'">摇滚</span>
        <span class="item"
          :class="{active:tag=='民谣'}"
          @click="tag='民谣'">民谣</span>
        <span class="item"
          :class="{active:tag=='电子'}"
          @click="tag='电子'">电子</span>
        <span class="item"
          :class="{active:tag=='轻音乐'}"
          @click="tag='轻音乐'">轻音乐</span>
        <span class="item"
          :class="{active:tag=='影视原声'}"
          @click="tag='影视原声'">影视原声</span>
        <span class="item"
          :class="{active:tag=='ACG'}"
          @click="tag='ACG'">ACG</span>
        <span class="item"
          :class="{active:tag=='怀旧'}"
          @click="tag='怀旧'">怀旧</span>
        <span class="item"
          :class="{active:tag=='治愈'}"
          @click="tag='治愈'">治愈</span>
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item"
            v-for="(item,index) in playlists"
            :key="index">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl"
                alt />
              <span class="iconfont icon-play el-icon-video-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10"></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "recommend",
  //侦听器
  watch: {
    tag() {
      this.topData();
      this.listData();
      this.page = 1;
    },
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      page: 1,
      tag: "全部",
      topcard: {},
      playlists: [],
    };
  },
  methods: {
    topData() {
      axios({
        url: "https://autumnfish.cn/top/playlist/highquality",
        method: "get",
        params: {
          limit: "1",
          cat: this.tag,
        },
      }).then((res) => {
        this.topcard = res.data.playlists[0];
      });
    },
    listData() {
      axios({
        url: "https://autumnfish.cn/top/playlist/",
        method: "get",
        params: {
          limit: "10",
          offset: (this.page - 1) * 10,
          cat: this.tag,
        },
      }).then((res) => {
        //console.log(res.data);
        this.total = res.data.total;
        this.playlists = res.data.playlists;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.listData();
    },
  },
  created() {
    this.topData(), this.listData();
  },
};
</script>

<style scoped>
.listsBox {
  width: 1100px;
  margin: 0 auto;
}
.listsBox .topCard {
  height: 200px;
  padding: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.topCard > img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  filter: blur(20px);
}
.listsBox .topCard .left-img {
  margin-right: 20px;
  z-index: 1;
  display: block;
}
.listsBox .topCard .left-img img {
  width: 160px;
  height: 160px;
}
.right-box {
  display: block;
  z-index: 1;
}
.toptitle {
  color: white;
  padding: 5px 0;
}
.right-box .tag {
  display: block;
  color: #dfac67;
  border: 1px solid #dfac67;
  width: 100px;
  height: 30px;
  text-align: center;
  border-radius: 5px;
  font-size: 16px;
  line-height: 30px;
  cursor: pointer;
}
.right-box .text {
  color: #888482;
  font-size: 14px;
  padding-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.bg-mask {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.tab-container {
  padding-top: 30px;
}

.tab-container .tab-bar {
  display: flex;
  justify-content: flex-end;
}

.tab-container .tab-bar .item {
  font-size: 15px;
  color: gray;
  margin-right: 20px;
  cursor: pointer;
}

.tab-container .tab-bar .item.active {
  color: #dd6d60;
}

.tab-container .tab-content {
  margin-top: 20px;
}

.tab-container .tab-content .items {
  display: flex;
  flex-wrap: wrap;
}

.tab-container .tab-content .items .item {
  width: 200px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.tab-container .tab-content .items .item img {
  width: 200px;
  height: 200px;
  border-radius: 5px;
}

.tab-container .tab-content .items .item .num-wrap {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  color: white;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.5);
  height: 30px;
  width: 100%;
  padding-left: 5px;
  top: -30px;
  overflow: hidden;
}

.tab-container .tab-content .items .item:hover .num-wrap {
  top: 0;
}

.tab-container .tab-content .items .item .img-wrap {
  position: relative;
}

.tab-container .tab-content .items .item .img-wrap .icon-play {
  position: absolute;
  right: 10px;
  bottom: 13px;
  width: 40px;
  height: 40px;
  padding: 5px;
  color: #dd6d60;
  font-size: 31px;
  border-radius: 50%;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
}

.tab-container .tab-content .items .item .img-wrap .icon-play::before {
  transform: translateX(3px);
}

.tab-container .tab-content .items .item .img-wrap:hover .icon-play {
  opacity: 1;
}

.tab-container .tab-content .items .item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
}

.el-pagination {
  margin-top: 50px;
  text-align: center;
}
</style>>
